<!--
 * @Date: 2023-09-14 14:41:11
 * @LastEditTime: 2023-10-12 16:22:28
 * 介绍:营销基金拨款
-->
<script lang="ts" setup>
import { getCountdown } from "@@/utils/tools/date";
import { _require } from "@@/utils/tools";
import dayjs from "dayjs";
import { useCurrentDate } from "@@/hooks/toolsHooks";
import router from "@@/router";
import { apiInsuredAppylList, ApiInsuredAppylList } from "@@/api/wk/list";
import { fixedDecimals, omitText } from "@@/utils/tools/format";
import { divide, multiply, add } from "mathjs";

const { currentDate } = useCurrentDate();

function getRatio(ok: StrNumber, no: StrNumber) {
  ok = Number(ok);
  no = Number(no);
  const res = multiply(divide(ok, add(ok, no)), 100);
  return Number.isNaN(res) ? 0 : res;
}
function countdown(time: string, end_time_hour: StrNumber) {
  const res = getCountdown(
    currentDate.value,
    dayjs(time).add(Number(end_time_hour), "h")
  );
  if (res.diffTime <= 0) return false;
  return `${res.H}:${res.m}:${res.s}`;
}
function toMarketingFundAllocationAudit(item: ApiInsuredAppylList.DataItem) {
  router.push({
    name: "marketingFundAllocationAudit",
    query: { json: JSON.stringify(item) },
  });
}
</script>
<template>
  <div class="auto-MT-lg">
    <CrequestList :api="apiInsuredAppylList">
      <template #item="{ item }">
        <Ccard
          @click="toMarketingFundAllocationAudit(item)"
          class="list-item auto-MT-sm"
        >
          <BwkLevel :level="item.user?.level" />
          <div class="MT-0">
            <h3>{{ omitText(item.user?.address) }}</h3>
          </div>
          <div class="C-T3 MT-xs">
            {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm:ss") }}
          </div>
          <div class="flex-A-C B-M1-O2 C-M1 PD-xs PL-sm PR-sm MT-sm R-xs">
            <Cicon name="icon-shijian" />
            <div class="ML-xs">{{ $t("daoJiShi") }}</div>
            <div class="ML-auto">
              {{
                countdown(item.created_at, item.end_time_hour) ||
                $t("yi-jie-shu")
              }}
            </div>
          </div>
          <Ccard class="flex-A-C PT-xs PB-xs MT-md gap-xs">
            <div class="flex-1 T-omit">{{ $t("shen-qing-wkc-shu-liang") }}</div>
            <Rbutton class="ML-auto" bg="var(--C-LG1)" borderStyle="none" round>
              <div class="flex-A-C">
                <Rimage
                  size="48rem"
                  :src="_require('src/assets/images/icon/jingbi.png')"
                />
                <div>${{ fixedDecimals(item.money, 2) }}</div>
              </div>
            </Rbutton>
          </Ccard>
          <div>{{ $t("tong-guo-shuai") }}</div>
          <div class="PD-md MT-0">
            <Rslider
              :model-vlaue="getRatio(item.agree_num, item.disagree_num)"
              readonly
              :min="0"
              :max="100"
              :step="0.01"
              active-color="var(--C-success)"
              inactive-color="var(--C-fail)"
            >
              <template #button="{ value }">
                <CstateTag class="T-nowrap C-white">
                  {{ fixedDecimals(value, 0) }}%
                </CstateTag>
              </template>
            </Rslider>
          </div>
          <!-- <div class="T-A-R T-S-sm">
              <span>{{ $t("tou-piao-ren-shu") }}</span>
              {{ add(Number(item.agree_num), Number(item.disagree_num)) }}
            </div> -->
        </Ccard>
      </template>
    </CrequestList>
  </div>
</template>
<style lang="scss" scoped>
.list-item {
  $size: 120rem;
  position: relative;
  $offsetTop: calc($size / 2 + var(--gap-sm));
  margin-top: $offsetTop;
  padding-top: $offsetTop;
  .BwkLevel {
    position: absolute;
    top: 0;
    transform: translateY(-50%) translateX(calc(0rem - var(--gap-sm)));
  }
}
</style>
